<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<style>
			.box1{
				width: 200px;
				height: 100px;
				background-color: #999;
				margin: 100px;
				transition: all 3s linear 1s;/*linear延迟*/
				/*旋转45度*/
				opacity: 0.1;/*透明度*/
			}
			.box1:hover{
				/* width: 300px; */
				transform:rotate(45deg) ;/*xuanzhuan*/
				transform: translate(200px,100px);/*weiyi*/
				transform: scale(1,2);/*suofang*/
				transform: skew(30deg,20deg);/*qingxie*/
				/* background-color: red; */
				animation: bgc 3s linear;/*guanjianzhen*/
				
			}
			@keyframes bgc{
				from{background-color: green;}
				to{background-color: red;}
				/*from to可以改变为0% 50%... 100%*/
			}
		</style>
	</head>
	<body>
		<p>这是一首诗：<span style="color:red;">《山行》</span></p>
		<p>这是一首诗：《鹿寨》</p>
		<span class="fa fa-car"></span>
		<!-- /*前缀fa +名称*/ -->
		<!-- <div class="box1"></div> -->
	</body>
</html>
